<template>
    <div>
       <Layout :style="{background: '#fff', minHeight: '600px'}">
         <Sider  :style="{background: '#fff',maxWidth:'150px',minWidth:'150px'}" >
              <Tree ref="tree" :data="newsCate" @on-select-change="setCateId()"></Tree>
         </Sider>
         <Layout :style="{background: '#fff'}">
        <div class="pannel-div">
            <Row type="flex"  align="middle">
                <Col span="3"><label>搜索关键字：</label></Col>
                <Col span="6">
                    <Input v-model="filters.name">
                    </Input>
                </Col>
                <Col span="6">
                    <Button class="btn" type="primary" :loading="loading" @click="getData()">
                        <span v-if="!loading">查询</span>
                        <span v-else>查询中...</span>
                    </Button>
                    <Button class="btn" type="success" @click="showModal()">新增</Button>
                </Col>
            </Row>
        </div>
        <div  class="pannel-div" :style="{ position: 'relative'}">
            <Table border :columns="columns" :data="data" ref="selection"  @on-select="rowSelect($event)" >
            </Table>
            <div style="width:200px;text-align:center;padding-top:10px;height:30px;line-height:30px">
            <Checkbox :style="{float:'left'}" v-model="single" @on-change="handleSelectAll(single)">全选</Checkbox>
            <Button :style="{float:'left'}" @click="removeConfirm()">删除多个</Button>
            </div>
           <Spin fix v-if="loading">
                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                <div>查询中...</div>
           </Spin>
        </div>
        <div  class="pannel-div">
            <Page :total="total" show-sizer @on-change="onChange" @on-page-size-change="onPageSizeChange" :page-size-opts=[5,10,15] show-elevator></Page></Page>
        </div>
        </Layout>
      </Layout>
         <Modal
            v-model="modal"
            :title="getTitile"
            @on-ok="ok"
            @on-cancel="cancel">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="新闻标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="新闻标题"></Input>
                </FormItem>
                <FormItem label="新闻摘要" prop="brief">
                    <Input v-model="formValidate.brief" placeholder="请输入新闻摘要"></Input>
                </FormItem>
                <FormItem label="作者" prop="author">
                    <Input v-model="formValidate.author" placeholder="请输入作者"></Input>
                </FormItem>
                <FormItem label="来源" prop="source">
                    <Input v-model="formValidate.source" placeholder="请输入您来源"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import { Base } from "./../Base";

export default {
  mixins: [Base],
  data() {
    return {
      module: "news",
      moduleName: "新闻",
      newsCate:[{title: "全部", expand: true,children:[]}],
      formValidate: {
        title: '',
        brief: '',
        author: '',
        source: '',
        data: ''
      },
       ruleValidate: {
                    title: [
                        { required: true, message: '新闻标题不能为空', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '作者不能为空', trigger: 'blur' }
                    ],
                    source: [
                        { required: true, message: '来源不能为空', trigger: 'blur' }
                    ]
                },
      columns: [
         {
                        type: 'selection',
                        width: 60,
                        align: 'center'
        },
        {
          title: "新闻标题",
          key: "title",
          width: 200
        },
        {
          title: "摘要",
          key: "brief"
        },
        {
          title: "作者",
          key: "author"
        },
        {
          title: "来源",
          key: "source"
        },
        {
          title: "评论数",
          key: "comNum"
        },
        {
          title: "Action",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.showModal(params.row._id);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.removeConfirm(params.row._id);
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.comment(params.row._id);
                    }
                  }
                },
                "评论"
              )
            ]);
          }
        }
      ]
    }
  },
  methods:{
    getTreeData(type){
      let me = this;
      this.$http({
          method:'get',
          url:`http://localhost:3000/cate/list/${type}`
      }).then(function(response) {
           me.$set(me.newsCate[0], 'children', response.data);
      });
    }
  },
  created(){
      this.getTreeData && this.getTreeData(0);
  }
}
</script>

<style>
div.pannel-div{
    padding:15px;
}

.btn{
    margin-left:10px;
}
 .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>